<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <title>hello</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
    // JavaScript代码将在此处编写
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");
    // 设置小球的初始位置和速度
    let x = 50;
    let y = 50;
    let dx = 5;
    let dy = 5;

    function draw() {
        // 清空画布
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // 绘制小球
        ctx.beginPath();
        ctx.arc(x, y, 20, 0, Math.PI * 2);
        ctx.fillStyle = "#0095DD";
        ctx.fill();
        ctx.closePath();

        // 更新小球的位置
        x += dx;
        y += dy;

        // 反弹小球
        if (x + dx > canvas.width - 20 || x + dx < 20) {
            dx = -dx;
        }
        if (y + dy > canvas.height - 20 || y + dy < 20) {
            dy = -dy;
        }

        // 循环调用draw函数
        requestAnimationFrame(draw);
    }

    // 开始动画
    draw();

</script>
</body>
</html>
